<template>
  <baseComponents>
    <el-row :gutter="40">
      <el-col :span="8">
        <carouselComponents />
      </el-col>
      <el-col :span="10">
        <newComponents />
      </el-col>
      <el-col :span="6">
        <dateComponents />
      </el-col>
    </el-row>
    <el-row class="info">
      <activityComponents />
    </el-row>
    <el-row class="info">
      <redSceneryComponents />
    </el-row>
    <el-row class="info">
      <storeComponents />
    </el-row>
    <el-row class="info">
      <cultureComponents />
    </el-row>
    <el-row class="info">
      <historyComponents />
    </el-row>
  </baseComponents>
</template>

<script>
import baseComponents from '@/components/global/baseComponents.vue';
import carouselComponents from '@/components/home/carouselComponents.vue';
import redSceneryComponents from '@/components/home/redSceneryComponents.vue';
import dateComponents from '@/components/global/dateComponents.vue';
import newComponents from '@/components/home/newComponents.vue';
import activityComponents from '@/components/home/activityComponents.vue';
import storeComponents from '@/components/home/storeComponents.vue';
import cultureComponents from '@/components/home/cultureComponents.vue';
import historyComponents from '@/components/home/historyComponents.vue';
export default {
  name: 'HomeView',
  components: {
    baseComponents,
    carouselComponents,
    redSceneryComponents,
    dateComponents,
    newComponents,
    activityComponents,
    storeComponents,
    cultureComponents,
    historyComponents,
  },
  setup() {
    return {

    }
  }
}
</script>

<style lang="css" scoped>
/deep/.el-carousel__indicators--horizontal {
  background-color: red;
  display: none;
}
</style>
